/* 预设CSS */
body {background-color: #000;}
@basecolor : #009688; //网站基础颜色
@btnhover  : #01685f; //按钮移动上颜色
.mt5 {margin-top: 5px !important; }
.mt10 {margin-top: 10px !important; }
.mt20 {margin-top: 20px !important; }
.mb10{ margin-bottom: 10px !important; }
.mb5 {margin-bottom: 5px; }
.mr5{ margin-right: 5px; }
.mr10{ margin-right: 10px; }
.mr20{ margin-right: 20px; }
.ml10{ margin-left: 10px !important;}
.ml5{ margin-left: 5px;}
.dlb{ display: block; }
.dib{ display: inline-block; }
.fll{ float: left; }
.flr{ float: right; }
.clr {clear: both; }
.btn-block{ border-radius: 3px;}
.btn-successful{ background: @basecolor; border: none; border-bottom: 3px solid @basecolor; color: #fff !important}
.btn-successful:hover, .btn-successful:active, .btn-successful:focus{ background: @btnhover; border-bottom: 3px solid @btnhover;}
.btn-default{ background: #eee; border: none; border-bottom: 3px solid #ddd !important;}
.btn-default:hover,.btn-default:active, .btn-default:focus{ background: #e5e5e5 !important; border-bottom: 3px solid #ccc !important;}
.btn-primary{ background: #3598DB; border: none; border-bottom: 3px solid #2486C8 !important;}
.btn-primary:hover,.btn-primary:active,.btn-primary:focus { background: #2D94D9; border-bottom: 3px solid #2486C8 !important;}
.btn-danger{ background: #DF091E; border: none; border-bottom: 3px solid #CC091C !important;}
.btn-danger:hover,.btn-danger:active,.btn-danger:focus { background: #D9091E; border-bottom: 3px solid #CC091C !important;}
.btn-login{ height: 34px; line-height: 32px; padding: 0 15px;}
.btn-facebook{ background: #39569B; color: #fff !important; border: none; border-bottom: 3px solid #314A86 !important;}
.btn-facebook:hover{ background: #314A86; border-bottom: 3px solid #2B4073;}

/* 头部导航logo */
.header {
	background-color: #000;margin-bottom: 15px;
	.top-logo-nav {position:relative;
		#search {position: absolute;width: 250px; top:28px; right: 650px;
			input.search-input {border: none;background: #444;box-shadow: none;color: #999;}
			.search-submit {display: inline-block;font-size: 18px;position: absolute;top: 0;right: 0;height: 30px;width: 30px;text-align: center;color: #999;}
			&.active {top: 45px;right: inherit;width: 100%;z-index: 99;}
		}
	}
	.mobile-menu, .mobile-search {display: none;}
	#snail-site-logo {margin-top: 15px; float: left;} 
	.pc-top-menu {float: right;}
	.snail-nav {
		display: inline-block; margin-top: 10px; margin-right:30px;
		ul {margin: 0;}
		li.menu-tiem {
			display: inline-block; float:left;
			a {color: #666; line-height: 65px; padding:0 20px; text-transform: uppercase; font-size: 14px; font-weight: 700; display: inline-block;position: relative;}
			a.active,
			a:hover {color: @basecolor;}
			a:after {content: ""; left: 50%;top:-9px;margin-top: -1.5px;position: absolute;width: 0;background: @basecolor;bottom: 22px;height: 3px;-webkit-transition: all 0.2s ease 0s;-o-transition: all 0.2s ease 0s;transition: all 0.2s ease 0s;}
			a:hover:after {margin-left: -37%;width: 73%;}
		}
	}

}

/* 首页banner */

.home-banner {
	position: relative;
	.banner-img {
		width: 100%; overflow: hidden;
		ul > li:after {content: " ";position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,.5)}
		ul > li:before {content: " "; position: absolute; width: 100%; height: 100%; left: 0; bottom: 0;   
		background-image: -webkit-linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 80%, #000 100%);
		background-image: -o-linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 80%, #000 100%);
		    background-image: linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 80%, #000 100%);}
	}

}

/* 首页推荐 */
.movies-list-wrap {
	padding:0;margin-bottom: 30px;
	.slideTxtBox {position: relative; margin-top:-100px; z-index: 99;}
	.ml-title {overflow: hidden;}
	.ml-title span {font-size: 18px;font-family: 'Montserrat';font-weight: 400;display: inline-block;padding: 0 20px;height: 40px;line-height: 40px;background: @basecolor;color: #fff;border-radius: 3px 3px 0 0;}
	.ml-title .ml-nav {
		display: inline-block; margin-left: 15px;
		li {float: left;
			a {display: inline-block; border: none;height: 40px;line-height: 40px;padding: 0 15px;text-align: center;min-width: 80px;color: #ddd; border-radius: 3px;}
			&.on a {background-color:#303030; color: #ddd; }
		}
	}
	.movies-list-container {margin:0 -1%;overflow: hidden;}
	.ml-list .ml-item {
		width: 10.5%;margin: 1%;float: left;position: relative;overflow: hidden;
		.mli-quality {background: #FED700;border-radius: 3px;color: #222;font-size: 11px;font-weight: 500;height: auto;line-height: normal;padding: 4px 6px;position: absolute;right: 8px;top: 8px;width: auto;z-index: 4;}
		a.ml-mask {
			position: relative;display: block;overflow: hidden;padding-bottom: 150%;text-align: center;
			img {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;}
			img[src*=loading] {top: 50%;left: 50%;width: 18px;height: 18px;margin-top: -9px;margin-left: -9px;}
			&:before {content: "";background: rgba(0,0,0,0.6);position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;}
			&:after {content: "\e6bb";width: 55px;height: 55px; font-family: "iconfont"; background-position: 50% 25%;background-size: cover;opacity: 0;position: absolute;top: 50%;left: 50%;margin-top: -27.5px;margin-left: -27.5px; font-size: 40px; color: @basecolor;}
			&:after, &:before {transition: all 0.2s ease 0s;-webkit-transition: all 0.2s ease 0s;z-index: 4;}
			&:hover:after,&:hover:before {opacity: 1;}
		}
	}

}

/* 列表页分页 */

#pagination {
	margin:0;
	text-align: center;
	.pagination {display: inline-block;padding-left: 0;margin: 20px 0;border-radius: 4px;
		li {display: inline;
			&:first-child>a, &:first-child>span {margin-left: 0;border-top-left-radius: 4px;border-bottom-left-radius: 4px;}
		}
		& > li > a {margin: 0 5px;border-radius: 3px;}
		& > li > a:hover {background-color: #fff; color: #000;}
		& > li > a, & > li > span {background: #252525;color: #ddd;border: none;}
		& > .active > a, & > .active > a:focus, & > .active > a:hover, & > .active > span, & > .active > span:focus, & > .active > span:hover {background: @basecolor;border: none;}
	}
}






/* 底部导航 */
footer {background: #1E1E1E;padding: 20px 0 40px;color: #fff;margin-top: 30px;}
#footer {
	.footer-link {float: left; margin-right: 60px;}
	.footer-link.end {margin: 0;}
	.footer-link-head {font-size: 16px; font-weight: 700; color: #fff;}
	a {color: #ccc;}
	a:hover {color: @basecolor;}
}

/* 手机版头部导航补丁 */
@media screen and (max-width:1199px) {
	.header {
		#search {display: none;}
	}
}
@media screen and (max-width:991px) {
	.header {
		.snail-nav {
			margin-right: 0;
			li.menu-tiem a {padding:0 15px;}
		}
	} 
}
@media screen and (max-width:767px) {
	.pc-top-menu {display: none;float: none;position: fixed;top: 50px;z-index: 99;width: 100%;left: 0;background: #000;}
	#snail-site-logo {float: none!important; text-align: center;
		.snail-logo {max-width: 102px;}
	}
	.mobile-menu, .mobile-search {
		display: inline-block!important;cursor: pointer;height: 34px;width: 34px;text-align: center;background: #444;border-radius: 3px;position: absolute;top: 0;left: 0;color: #fff;line-height: 34px;
		i {font-size: 20px;}
	}
	.mobile-search {left: auto;right: 0;}
	.header .snail-nav li.menu-tiem a {line-height: 35px;}
}


/* 手机版推荐补丁 */
@media screen and (max-width:1199px) {
	.movies-list-wrap {
		.ml-title span {display: block; margin-bottom: 10px; background: none; text-align: left; padding: 0; }
		.ml-list .ml-item {width: 14.6%;}
	} 
}
@media screen and (max-width:991px) {
	.movies-list-wrap {
		.ml-list .ml-item {width: 23%;}
		.ml-title {
			.ml-nav {
				margin: 0;clear: both; float: none; width: 100%;
				li a {height: 30px; line-height: 30px;}
			}
		}
	} 
}
@media screen and (max-width:767px){
	.movies-list-wrap {
		.slideTxtBox {margin-top: -200px;}
	}
}
@media screen and (max-width:520px) {
	.movies-list-wrap .ml-list .ml-item {width: 31.3%;}
}
@media screen and (max-width:479px) {
	.movies-list-wrap .ml-list .ml-item {width: 47%;margin: 1.5%;}
}




/* 手机版底部补丁 */
@media screen and (max-width:1325px) {
	footer {
		.footer-one,.footer-subs{ width: 50%;}
		.footer-copyright{ width: 100%; float: none; text-align: center; overflow: hidden; padding-top: 30px;}
	}
}
@media screen and (max-width: 1199px){
	footer {
		.footer-one,.footer-subs {float: left;}
	}
}
@media screen and (max-width: 799px){
	footer {
		.footer-one {display: none;}
		.footer-subs {width: 60%;float: right;}
		.footer-copyright {width: 40%;float: left;text-align: left;padding-top: 10px;}
	}
}
@media screen and (max-width: 640px){
	footer {
		.footer-subs,.footer-copyright {width: 100%;float: none;margin-bottom: 20px;}
		.footer-subs .footer-link-head {display: none;}
		.footer-copyright {text-align: center;}
		.footer-copyright img {max-width: 50%;}
	}
}
